<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>抗日战士 - 上海街头战斗</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="game-container">
    <!-- 游戏标题 -->
    <div class="game-title">
      <h1>抗日战士</h1>
      <p>上海街头战斗</p>
    </div>

    <!-- 游戏画布 -->
    <div class="game-canvas-container">
      <canvas id="gameCanvas" width="800" height="600"></canvas>

      <!-- 游戏状态栏 -->
      <div class="game-status">
        <div class="status-item">
          <span class="status-label">分数:</span>
          <span id="score">0</span>
        </div>
        <div class="status-item">
          <span class="status-label">生命:</span>
          <span id="lives">❤️❤️❤️</span>
        </div>
        <div class="status-item">
          <span class="status-label">手雷:</span>
          <span id="grenades">💣 x3</span>
        </div>
      </div>

      <!-- 道具强化状态栏 -->
      <div class="powerup-status">
        <div id="adrenalineStatus" class="powerup-item" style="display: none;">
          <span class="powerup-icon">⌛</span>
          <span class="powerup-text">肾上腺素</span>
          <div class="powerup-progress-container">
            <div class="powerup-progress"></div>
          </div>
        </div>
        <div id="vestStatus" class="powerup-item" style="display: none;">
          <span class="powerup-icon">🛡️</span>
          <span class="powerup-text">防弹衣</span>
        </div>
        <div id="dynamiteStatus" class="powerup-item" style="display: none;">
          <span class="powerup-icon">💥</span>
          <span class="powerup-text">炸药包</span>
        </div>
      </div>
    </div>

    <!-- 游戏控制说明 -->
    <div class="game-controls">
      <div class="control-section">
        <h3>操作说明</h3>
        <p><strong>移动:</strong> WASD 键控制角色移动</p>
        <p><strong>射击:</strong> 鼠标左键瞄准射击</p>
        <p><strong>手雷:</strong> 空格键投掷手雷</p>
        <p><strong>暂停:</strong> ESC 键暂停游戏</p>
      </div>
    </div>

    <!-- 开始界面 -->
    <div id="startScreen" class="game-screen">
      <div class="screen-content">
        <h2>抗日战士</h2>
        <p>保卫上海，消灭敌人！</p>
        <button id="startBtn" class="game-btn">开始游戏</button>
      </div>
    </div>

    <!-- 武器选择界面 -->
    <div id="weaponSelectScreen" class="game-screen hidden">
      <div class="screen-content">
        <h2>选择武器</h2>
        <div class="weapon-options">
          <div class="weapon-option selected" data-weapon="pistol">
            <h3>手枪</h3>
            <p>射速: ★★★☆☆</p>
            <p>威力: ★★☆☆☆</p>
            <p>精准度: ★★★★☆</p>
          </div>
          <div class="weapon-option" data-weapon="rifle">
            <h3>步枪</h3>
            <p>射速: ★★☆☆☆</p>
            <p>威力: ★★★★☆</p>
            <p>精准度: ★★★★★</p>
          </div>
          <div class="weapon-option" data-weapon="smg">
            <h3>冲锋枪</h3>
            <p>射速: ★★★★★</p>
            <p>威力: ★★★☆☆</p>
            <p>精准度: ★★☆☆☆</p>
          </div>
        </div>
        <button id="confirmWeaponBtn" class="game-btn">确认选择</button>
        <button id="backToStartBtn" class="game-btn secondary">返回</button>
      </div>
    </div>

    <!-- 游戏结束界面 -->
    <div id="gameOverScreen" class="game-screen hidden">
      <div class="screen-content">
        <h2>游戏结束</h2>
        <p>最终分数: <span id="finalScore">0</span></p>
        <p>使用武器: <span id="finalWeapon">手枪</span></p>
        <button id="restartBtn" class="game-btn">重新开始</button>
      </div>
    </div>

    <!-- 暂停界面 -->
    <div id="pauseScreen" class="game-screen hidden">
      <div class="screen-content">
        <h2>游戏暂停</h2>
        <p>当前武器: <span id="pauseWeapon">手枪</span></p>
        <button id="resumeBtn" class="game-btn">继续游戏</button>
        <button id="restartFromPauseBtn" class="game-btn secondary">重新开始</button>
        <button id="quitToMenuBtn" class="game-btn secondary">退出到菜单</button>
      </div>
    </div>
  </div>

  <script src="script.js"></script>
</body>

</html>